<template>
  <div class="reserve_box">
    <header-comm></header-comm>
    <div class="bcg">
      <!-- <reservepage></reservepage> -->
      <div class="margin_top">
        <div class="top_reserve">
          <div class="tit">技术选型</div>
        </div>
        <div class="reserve_box">
          <a-table
            :columns="reservecolumns"
            :pagination="pagination"
            :dataSource="reservedata"
            bordered
          >
            <template
              v-for="col in ['xsze', 'fxbl', 'fxze']"
              :slot="col"
              slot-scope="text, record, index"
            >
              <div class="rig_xse_bac" :key="col">
                <template>{{text}}</template>
              </div>
            </template>
            <template slot="down" slot-scope="text, record, index">
              <div class="down_box">
                <span class="del">
                  <a :href="record.annex" target="view_frame">下载</a>
                  <a-icon class="ico" type="cloud-download" />
                </span>
              </div>
            </template>
            <template slot="examine" slot-scope="text, record, index">
              <div class>
                <a-tag v-if="text==0" color="#2db7f5">未审核</a-tag>
                <a-tag v-if="text==1" color="#87d068">通过</a-tag>
                <a-tag v-if="text==2" color="#f50">审核未通过</a-tag>
              </div>
            </template>
            <template slot="operation" slot-scope="text, record, index">
              <!-- <span class="del" @click="examines(1,record.id_num)">审核通过</span> -->
              <!-- <span class="del" @click="examines(2,record.id_num)">审核不通过</span> -->
              <span class="del" @click="xxfk(record.id_num)">反馈</span>
              <span class="del" @click="deleter(record.key)">删除</span>
            </template>
          </a-table>
          <div class="shyy_tk" v-if="shyyflag">
            <div class="sryy">
              <div class="close" @click="close">
                <a-icon type="close" />
              </div>
              <!-- <div>
                <a-textarea
                  v-if="shyyval.key==1"
                  :maxlength="10"
                  v-model="remark"
                  placeholder="请输入金额"
                  :rows="4"
                />
                <a-textarea
                  v-if="shyyval.key==2"
                  v-model="remark"
                  placeholder="请输入审核不通过原因"
                  :rows="4"
                />
              </div>-->
              <div>
                <a-upload
                  name="file"
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="picture"
                  :file-list="fileList"
                  @change="handleChange"
                  @preview="handlePreview"
                  accept=".docx"
                >
                  <a-button v-if="fileList.length==1?false:true">
                    <a-icon type="upload" />反馈文件上传
                  </a-button>
                </a-upload>
              </div>
              <div class="btn">
                <a-button type="primary" @click="subkhbbExamine">提交</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";

import qs from "qs";
const reservecolumns = [
  {
    title: "姓名",
    dataIndex: "username",
    scopedSlots: { customRender: "username" }
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    scopedSlots: { customRender: "phone" }
  },
  {
    title: "公司名称",
    dataIndex: "companyName",
    scopedSlots: { customRender: "companyName" }
  },
  {
    title: "内容",
    dataIndex: "down",
    scopedSlots: { customRender: "down" }
  },
  {
    title: "价格",
    dataIndex: "payPrice"
  },
  {
    title: "原因",
    dataIndex: "remark"
  },
  {
    title: "提交时间",
    dataIndex: "dateline",
    scopedSlots: { customRender: "dateline" }
  },
  {
    title: "审核状态",
    dataIndex: "examine",
    scopedSlots: { customRender: "examine" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
const reservedata = [];

for (let i = 0; i < 20; i++) {
  // data.push({
  //   key: i.toString(),
  //   xse: "大于5000",
  //   tcbl: "5%"
  // });
  //   reservedata.push({
  //     key: i.toString(),
  //     id_num: i,
  //     username: "王圣磊",
  //     qy: "陕西西安",
  //     fl: "2020-3-31",
  //     down: "下载"
  //   });
}
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  data() {
    return {
      reservedata,
      reservecolumns,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      shyyflag: false,
      remark: "",
      fileList: [],
      //   defaultFileList: [],
      shyyval: {
        id_num: ""
      }
    };
  },

  methods: {
    getcpydlist(pagination) {
      this.axios
        .post(
          "fhl/xunjia/productDzList.php",
          qs.stringify({
            page: pagination.current,
            pageSize: pagination.defaultPageSize,
            sqdwid: this.$store.state.bbl_sqdwid,
            type: 9
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.pagination.total = Number(res.data.result.total);
            this.reservedata = res.data.result.data;
            for (var i = 0; i < this.reservedata.length; i++) {
              this.reservedata[i].key = this.reservedata[i].id_num;
            }
          } else {
            this.reservedata = [];
          }
        });
    },
    xxfk(id_num) {
      this.shyyflag = true;
      this.shyyval.id_num = id_num;
    },

    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      console.log(fileList);
    },
    // examines(examine_type, id_num) {
    //   this.shyyflag = true;
    //   this.shyyval.key = examine_type;
    //   this.shyyval.val = id_num;
    // },
    subkhbbExamine() {
      var name = this.fileList[0].name.split(".");
      console.log(name[name.length - 1]);
      this.axios
        .post(
          "fhl/xunjia/fankui.php",
          qs.stringify({
            id_num: this.shyyval.id_num,
            remark: this.fileList[0].thumbUrl,
            fileSuffix: name[name.length - 1]
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.getcpydlist(this.pagination);
            this.close();
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },

    close() {
      this.shyyflag = false;
      this.fileList = [];
    },
    deleter(key) {
      this.axios
        .post(
          "fhl/xunjia/productDzDelete.php",
          qs.stringify({
            id_num: key
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.getcpydlist(this.pagination);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    }
  },
  components: {
    headerComm
  },
  created() {
    this.getcpydlist(this.pagination);
  }
};
</script>

<style lang='less'>
.margin_top {
  width: 98%;
  margin: 67px auto;
  background: #fff;
  padding: 22px;
  .top_reserve {
    text-align: left;
    font-weight: bold;
    font-size: 18px;
    color: #333;
  }
  .top_reserve {
    padding: 10px;
  }
  .reserve_box {
    .down_box {
      .ico {
        font-size: 20px;
        margin-left: 5px;
        vertical-align: middle;
      }
    }
  }
}
</style>
